<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./CSS/normalize.css">
    <link rel="stylesheet" href="./icon/font_3484823_t6q6q64gri/iconfont.css">
    <script src="./bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js"></script>
    <title>Herju的个人网站</title>
</head>

<body class=" bg-light position-relative" data-bs-spy="scroll" data-bs-target=".navbar">
    <!-- nav start -->
    <div class="container-fluid px-0 shadow navbarControl">
        <nav class="navbar navbar-expand-md navbar-dark navbarBg">
            <div class="container-fluid px-4">
                <a class="navbar-brand ms-4" herf="#">
                    Herju's Home
                </a>
                <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#foldBtn">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="foldBtn">
                    <ul class="navbar-nav ms-auto me-4 navbarCli">
                        <li class="nav-item text-center">
                            <a class="nav-link fw-lighter" href="#bk">博客 Blog</a>
                        </li>
                        <li class="nav-item text-center">
                            <a class="nav-link fw-lighter" href="#jn">技能 Skill</a>
                        </li>
                        <li class="nav-item text-center">
                            <a class="nav-link fw-lighter" href="#it">项目 Item</a>
                        </li>
                        <li class="nav-item text-center">
                            <a class="nav-link fw-lighter" href="#ab">关于 About</a>
                        </li>
                        <li class="nav-item text-center">
                            <a class="nav-link fw-lighter" href="#lx">联系我 Call</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <!-- nav end -->

    <!-- banner start -->
    <div class="container-fluid navbarBg bannerContent">
        <div class="row">
            <div class="col-12 col-md-6 text-white p-5 pb-0 pb-md-5">
                <h1 style="font-size: 2.8rem;" class="my-3">欢迎您来的我空间，期待与您更详细的交流。</h1>
                <p class=" fw-lighter">朋友，人生不长，却也不必急于一时，不如坐下喝杯茶，看看周围的风景，也许你我的相遇是一种缘分，是一杯香醇浓郁的热茶。</p>
                <ul class=" list list-unstyled d-flex align-items-center">
                    <li class="me-2">关注我：</li>
                    <li class="me-2 position-relative fs-6 banner-icon-qq">
                        <a href="#" class="text-white text-decoration-none">
                            <i class="iconfont icon-QQ"></i>
                        </a>
                        <img src="./image/QQ3.png" class="img-QQ">
                    </li>
                    <li class="me-2 position-relative fs-6 banner-icon-wx">
                        <a href="#" class="text-white text-decoration-none ">
                            <i class="iconfont icon-weixin"></i>
                        </a>
                        <img src="./image/wx2.png" class="img-WX">
                    </li>
                    <li class=" fs-6">
                        <a href="https://github.com/herjuandlonely" class="text-white text-decoration-none"
                            target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-github" viewBox="0 0 16 16">
                                <path
                                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
                            </svg>
                        </a>
                    </li>
                </ul>
                <button class="btn fw-lighter text-dark mt-4 mb-md-5 mb-0 btn-lg fs-6"
                    style="background-color: #a19975;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-envelope-fill me-1" viewBox="0 0 16 16">
                        <path
                            d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z" />
                    </svg>
                    Mail to me
                </button>
            </div>
            <div class="col-12 col-md-6 p-5 bannerImg d-flex justify-content-center">
                <img src="./image/IMG_20220625_204302.jpg" class=" rounded-3 w-75 mt-0 mt-md-4 img-thumbnail">
            </div>
        </div>
    </div>
    <!-- banner start -->

    <!-- Blog start -->
    <div class="container pt-5 pb-2">
        <h3 id="bk">博客<span class=" fw-lighter">Blog</span></h3>
        <p class=" fw-lighter mt-3">
            博客是以超级链接为入口的网络日记，它代表着新的生活、工作和学习方式。许多博客专注在特定的课题上提供评论或新闻，其他则被作为个人性的日记。
        </p>
        <div class="row">
            <div class="col-md-6 col-12">
                <a href="./view/index-blog.html" class=" text-decoration-none blog-text" target="_blank">
                    <img src="./image/piqsels.com-id-fggmp.png" class=" w-100 rounded-2">
                    <h5 class=" mt-4 ms-1">
                        <span style="color: #a19975;">程序类(Programmer)</span><span class=" fw-normal blog-text-title"> -
                            抛弃35岁员工是一种罪</span>
                    </h5>
                    <p class="mt-2 ms-1 fw-lighter text-truncate">科技互联网行业对高龄员工的偏见，是因为这些员工从事的工作没有完全摆脱劳动密集型的本质。</p>
                </a>
            </div>
            <div class="col-md-6 col-12 mt-4 mt-md-0">
                <a href="https://www.cnblogs.com/JavaArchitect/p/11062713.html" class=" text-decoration-none blog-text"
                    target="_blank">
                    <img src="./image/piqsels.com-id-szhul.png" class=" w-100 rounded-2">
                    <h5 class=" mt-4 ms-1 text-truncate">
                        <span style="color: #a19975;">程序类(Programmer)</span><span class=" fw-normal blog-text-title"> -
                            我为能准时下班而做的准备，以及由此的收获，同时总结下不足</span>
                    </h5>
                    <p class="mt-2 ms-1 fw-lighter text-truncate">能否准时下班其实和工作效率和质量有关，取决于自己，而不在于其它因素。</p>
                </a>
            </div>
        </div>
    </div>
    <!-- Blog start -->

    <!-- Skill start -->
    <div class="container-fluid bg-white pt-4 pb-5">
        <div class="container mt-1">
            <h3 id="jn">技能<span class=" fw-lighter">Skill</span></h3>
            <p class=" fw-lighter mt-3">
                前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。
            </p>
            <!-- 选项卡 -->
            <nav class="nav nav-tabs navtab-text">
                <a href="#start-skill" class="nav-link active" data-bs-toggle="tab">前端技能</a>
                <a href="#end-skill" class="nav-link" data-bs-toggle="tab">后端技能</a>
            </nav>
            <div class="tab-content mt-4 px-1">
                <div class="tab-pane fade show active" id="start-skill">
                    <div class="row">
                        <div class="col-lg-4 col-12">
                            <img src="./image/src=http___inews.gtimg.com_newsapp_match_0_8574056547_0.jpg&refer=http___inews.gtimg.jpeg"
                                class="w-100 rounded-2">
                        </div>
                        <div class="col-lg-8 col-12 mt-3 mt-lg-0">
                            <p>前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript
                                等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
                            </p>
                        </div>
                    </div>
                    <div class="px-1">
                        <h4 class="mt-3">HTML</h4>
                        <div class="progress mt-3">
                            <div class="progress-bar bg-info" style="width: 80%;"></div>
                        </div>
                        <h4 class="mt-4">CSS</h4>
                        <div class="progress mt-3">
                            <div class="progress-bar bg-info" style="width: 75%;"></div>
                        </div>
                        <h4 class="mt-4">JavaScript</h4>
                        <div class="progress mt-3">
                            <div class="progress-bar bg-info" style="width: 70%;"></div>
                        </div>
                        <h4 class="mt-4">jQuery</h4>
                        <div class="progress mt-3">
                            <div class="progress-bar bg-info" style="width: 65%;"></div>
                        </div>
                        <h4 class="mt-4">BootStrap</h4>
                        <div class="progress mt-3">
                            <div class="progress-bar bg-info" style="width: 70%;"></div>
                        </div>
                        <h4 class="mt-4">Vue</h4>
                        <div class="progress mt-3">
                            <div class="progress-bar bg-info" style="width: 80%;"></div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="end-skill">
                    <div class="row">
                        <div class="col-lg-4 col-12">
                            <img src="./image/piqsels.com-id-szhul.png" class="w-100 rounded-2">
                        </div>
                        <div class="col-lg-8 col-12 mt-3 mt-lg-0">
                            <p>后端工程师隶属于软件研发工程师，是从事软件开发相关工作人员，其主要职责是平台设计、接口设计和功能实现。后端的工程师只负责提供接口和数据,专注于业务逻辑的实现,前端取到数据后在浏览器中展示,各司其职。在公司内，主要的内容负责后台内容的编写。
                            </p>
                        </div>
                    </div>
                    <div class="px-1">
                        <h4 class="mt-3">Node.JS</h4>
                        <div class="progress mt-3">
                            <div class="progress-bar bg-info" style="width: 80%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Skill end -->

    <!-- 项目 item -->
    <div class="container-fluid bg-light my-5">
        <div class="container">
            <h3 id="it">
                项目<span class=" fw-lighter">Item</span>
            </h3>
            <p class=" fw-lighter mt-3">
                项目经历在现在的招聘中被企业越来越看重，它是给工作经验的加分项，相对于工作经验，项目经验更侧重于表现求职者具备项目管理能力，具有参与某个项目管理的经验，侧面反映你的某项能力被公司所给予厚望。
            </p>
            <div class=" w-100 row ms-0">
                <div class="col-md-4 col-12">
                    <div class="w-100 card px-0 shadow mx-auto">
                        <img src="./image/wyyx.png" class="card-img-top border">
                        <div class=" card-body">
                            <!-- 主标题 -->
                            <h4 class="card-title fw-bold">网易严选</h4>
                            <!-- 内容 -->
                            <p class="card-text text_dian">个人练习项目，使用了Vue3、VueCli、Vuex、VueRouter等技术</p>
                            <a href="https://gitee.com/herjuandlonely/yeation" target="_blank" class="card-link float-end">了解详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12 mt-3 mt-md-0">
                    <div class="w-100 card px-0 shadow mx-auto"">
                        <img src="./image/wyykt.png" class="card-img-top border">
                        <div class=" card-body">
                            <!-- 主标题 -->
                            <h4 class="card-title fw-bold">网易云课堂</h4>
                            <!-- 内容 -->
                            <p class="card-text text_dian">个人练习项目，使用了Vue3、VueCli、ElementUi、Axios等技术</p>
                            <a href="https://gitee.com/herjuandlonely/wyykt-Vue" target="_blank" class="card-link float-end">了解详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12 mt-3 mt-md-0">
                    <div class="w-100 card px-0 shadow mx-auto"">
                        <img src="./image/yys.png" class="card-img-top border">
                        <div class=" card-body">
                            <!-- 主标题 -->
                            <h4 class="card-title fw-bold">阴阳师官网-移动端</h4>
                            <!-- 内容 -->
                            <p class="card-text text_dian">个人练习项目，使用了Zepto、Swiper、Javascript、CSS等技术</p>
                            <a href="http://herjuandlonely.gitee.io/wy-yys-mobile/" target="_blank" class="card-link float-end">了解详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- item end -->

    <!-- 关于我 start -->
    <div class="container-fluid bg-white py-5">
        <div class="container">
            <h3 id="ab">
                关于我<span class=" fw-lighter">About</span>
            </h3>
            <p class=" fw-lighter mt-3">
                个人简历是求职者给招聘单位发的一份简要介绍。包含自己的基本信息：姓名、性别、年龄、民族、籍贯、政治面貌、学历、联系方式，以及自我评价、工作经历、学习经历、荣誉与成就、求职愿望、对这份工作的简要理解等等。以简洁重点为最佳标准。
            </p>
            <div class=" w-100 p-5 bg-white border shadow mt-5 row ms-0">
                <div class="col-md-3 col-12 ">
                    <div class=" text-center">
                        <div class="w-100">
                            <img src="./image/wo.jpg" class=" w-75 mt-2 rounded-3 shadow" />
                        </div>
                        <div class="badge mt-2 mt-md-3 rounded-pill bg-info">前端工程师</div>
                        <div class="badge mt-2 mt-md-3 rounded-pill bg-danger">HTML</div>
                        <div class="badge mt-2 mt-md-3 rounded-pill bg-secondary">CSS</div>
                        <div class="badge mt-2 mt-md-3 rounded-pill bg-primary">JavaScript</div>
                        <div class="badge mt-2 mt-md-3 rounded-pill bg-success">Vue</div>
                        <div class="badge mt-2 mt-md-3 rounded-pill bg-info">NodeJs</div>
                        <div class="badge mt-2 mt-md-3 rounded-pill bg-warning">Bootstrap</div>
                        <div class="badge mt-2 mt-md-3 rounded-pill bg-danger">Sass</div>
                    </div>
                </div>
                <div class="col-md-9 col-12 mt-3 mt-md-0">
                    <h3 class="mt-1 text-center text-md-start">自我介绍</h3>
                    <hr class=" mt-3 mb-3">
                    <p class="mb-0">
                        &emsp;&emsp;何亚，97年生于广东省湛江市，现今26岁，身体健康、性格开朗。2019年毕业于广东岭南职业技术学院（动漫设计与制作专业），前视频剪辑师，现转行web前端工程师。
                    </p>
                    <p class="mt-2 mb-0">&emsp;&emsp;2018-2021年，在卓点广告传媒有限公司、广州数羊科技有限公司和湛江猫虎传媒有限公司担任视频剪辑师的职位。</p>
                    <p class="mt-2 mb-0">&emsp;&emsp;2022年1月，在个人兴趣和家人的影响下，选择辞职后跟着网易云课堂微专业的前端负责人-李游老师学习前端知识，
                        期望转行前端工程师，从事自己喜欢的行业，并不断地努力学习更多其它前端知识和前沿技术，更好地充实人生和实现人生价值。</p>
                    <p class="mt-2 mb-0">&emsp;&emsp;在学习前端知识期间，掌握了HTML+CSS，并熟练使用Bootstrap页面布局；掌握了Javascript，并熟练使用jQuery实现页面交互；掌握了Vue2和Vue3，并熟练使用Vue Cli+Vuex+VueRouter进行单页面配置、开发；熟悉Sass、Element ui和Swiper等前端开发库；熟悉NodeJs+Express快速构建web应用；熟练使用Github和Gitee进行代码管理。
                    </p>
                    <p class="mt-2 mb-0">&emsp;&emsp;于2022年8月参加web前端开发工程师（高级）考核，并顺利取得<a title="点击查看证书" class="text-secondary certificate" href="./view/skill1.html">工业和信息化人才能力提升证书</a>和<a title="点击查看证书" class="text-secondary certificate" href="./view/skill2.html">网易云课堂微专业证书。</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- 关于我 end -->

    <!-- 联系我 start -->
    <div class="container-fluid py-5 bg-light">
        <div class="container">
            <h3 id="lx">
                联系我<span class=" fw-lighter">Call</span>
            </h3>
            <p class=" fw-lighter mt-3 mb-5">
                我知道你一定有很多话想跟我说，无论是学习的，还是其他方面的，只要你有问题，就可以发送给我，我会尽可能与你联系。
            </p>
            <div class="row">
                <div class="col-12 col-md-5 order-2 order-md-0 mt-4 mt-md-0">
                    <div class=" d-none d-md-block">
                        <h5>发一封邮件试试</h5>
                        <span class=" fw-lighter">今天第一次刚认识我？没关系，我们已经是朋友了。发个邮件让我知道你来过了。</span>
                    </div>
                    <h5 class="mt-4 mt-md-5">联系方式</h5>
                    <b class="mb-5">Email:</b>
                    <span>1026275854@qq.com</span><br>
                    <b>Phone:</b>
                    <span>13724043160</span><br>
                    <b>QQ:</b>
                    <span>1026275854</span><br>
                    <b>微信:</b>
                    <span>13724043160</span>
                    <h5 class="mt-4">联系地址</h5>
                    <b>Office:</b>
                    <span>广东省湛江市霞山区</span>
                </div>
                <div class="col-md-7 col-12 border shadow">
                    <form>
                        <div class="row p-5">
                            <div class="col-12 d-block d-md-none mb-4">
                                <h5>发一封邮件试试</h5>
                                <span class=" fw-lighter">今天第一次刚认识我？没关系，我们已经是朋友了。发个邮件让我知道你来过了。</span>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class=" form-label fw-lighter" for="firstNameIput">First Name<span
                                        class=" text-danger">*</span></label>
                                <input type="text" required class="form-control" id="firstNameIput"
                                    placeholder="First Name" />
                                <label class=" form-label fw-lighter mt-4" for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Email" />
                            </div>
                            <div class="col-md-6 col-12 mt-4 mt-md-0">
                                <label class=" form-label fw-lighter" for="lastNameIput">Last Name<span
                                        class=" text-danger">*</span></label>
                                <input type="text" required class="form-control" id="lastNameIput"
                                    placeholder="Last Name" />
                                <label class=" form-label fw-lighter mt-4" for="phoneIput">Phone Number:</label>
                                <input type="tel" class="form-control" id="phoneIput" placeholder="Last Name" />
                            </div>
                            <div class="col-12 mt-4">
                                <label class=" form-label fw-lighter" for="msgIput">Message<span
                                        class=" text-danger">*</span></label>
                                <textarea class=" form-control" required id="msgIput"></textarea>
                                <button class="btn btn-dark mt-4 send" type="submit">发送邮件</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="alertAll d-none">
        <div class="alertNode d-block d-md-none">
            <div
                class="alert alert-light m-0 p-0 alertNodeContent position-absolute translate-middle top-50 start-50 p-md-5 p-3  fade show alert-dismissible pb-md-3 pb-2 w-75">
                <h3 class=" lh-base mb-0 fs-5 p-2 text-center">我已收到您宝贵的建议，非常感谢！</h3>
                <hr class=" m-md-3 m-2 mt-3 mt-md-5">
                <div class="row">
                    <div class="col-6 border-end border-secondary good">
                        <div class=" text-center fs-5 my-0">好的</div>
                    </div>
                    <div class="col-6 cancel">
                        <div class=" text-center fs-5 my-0">取消</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alertNode d-none d-md-block">
            <div
                class="alert alert-dark m-0 p-0 alertNodeContent position-absolute translate-middle top-50 start-50 p-md-5 p-3  fade show alert-dismissible">
                <button class=" btn-close d-none d-md-block" data-bs-dismiss="alert"></button>
                <h3 class=" lh-base mb-0">我已收到您宝贵的建议，非常感谢！</h3>
            </div>
        </div>
    </div>
    <!-- 联系我 end -->

    <!-- footer start -->
    <div class="container-fluid navbarBg py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-12 text-center text-md-start">
                    <ul class=" list-unstyled text-light">
                        <li class=" fw-bold">服务器端支持</li>
                        <li class="mt-2 fw-light"><small>Web端支持</small></li>
                        <li class=" fw-light"><small>Phone端支持</small></li>
                    </ul>
                </div>
                <div class="col-md-3 col-12 text-center text-md-start">
                    <ul class=" list-unstyled text-light">
                        <li class=" fw-bold">功能性模块</li>
                        <li class="mt-2 fw-light"><small>博客Blog</small></li>
                        <li class=" fw-light"><small>技能Skill</small></li>
                        <li class=" fw-light"><small>关于About</small></li>
                        <li class=" fw-light"><small>联系我Call</small></li>
                    </ul>
                </div>
                <div class="col-md-3 col-12 text-center text-md-start">
                    <ul class=" list-unstyled text-light">
                        <li class=" fw-bold">技能支持</li>
                        <li class="mt-2 fw-light"><small>Web前端技术</small></li>
                        <li class=" fw-light"><small>PhotoShop</small></li>
                        <li class=" fw-light"><small>BootStrap 5</small></li>
                    </ul>
                </div>
                <div class="col-md-3 col-12 text-center text-md-start">
                    <ul class=" list-unstyled text-light">
                        <li class=" fw-bold">Herju's Home</li>
                        <li class="mt-2 fw-light"><small>何亚耗时5小时完成的个人网站，希望大家喜欢，这是一个非常不错的项目练习。</small></li>
                    </ul>
                </div>
                <div class="col-12 text-center text-light mt-3">
                    <span>此网站由 何亚Herju © 1997-2022 版权所有</span>
                    <br>
                    <span>工业和信息化部备案管理系统网站</span>
                </div>
            </div>

        </div>
    </div>
    <!-- footer end -->

    <script src="./JS/index.js?v=1.0.1"></script>
</body>

</html>